<template>
  <div class="project-app-wrapper flex flex-col">
    <div class="header flex">
      <div class="header-left" @click="handleGoTo">
        <img :src="logo" alt="" />
        <h2>{{ title }}</h2>
      </div>
      <div class="!h-full flex items-center justify-center pr-10 cursor-pointer">
        <div @click="goHome" class="flex justify-center gap-2 text-white go-home-btn hover:text-blue-300">
          <img src="@/assets/icons/exit.svg" alt="" width="20" height="20" />
          <span>退出</span>
        </div>
      </div>
    </div>
    <div class="flex main-content-wrapper">
      <div class="left">
        <Sidebar />
        <div class="main-content uranus-scrollbar dark">
          <router-view v-if="isMounted" />
        </div>
      </div>

      <div class="right">
        <div class="map-wrapper">
          <GMap />
        </div>
        <div class="media-wrapper" v-if="root.$route.name === ERouterName.MEDIA">
          <MediaPanel />
        </div>
        <div class="task-wrapper" v-if="root.$route.name === ERouterName.TASK">
          <TaskPanel />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { createVNode, defineComponent } from 'vue'
import * as icons from '@ant-design/icons-vue'

import Sidebar from '@/components/common/sidebar.vue'
import MediaPanel from '@/components/MediaPanel.vue'
import TaskPanel from '@/components/task/TaskPanel.vue'
import GMap from '@/components/GMap.vue'
import { EBizCode, ERouterName } from '@/types'
import { getRoot } from '@/root'
import { useMyStore } from '@/store'
import { useRouter } from 'vue-router'
import { useConnectWebSocket } from '@/hooks/use-connect-websocket'
import EventBus from '@/event-bus'
import { consoleError } from '@/utils/logger'
import { sessionStorage } from '@/utils/storage'
import useGMapManage from '@/hooks/use-g-map'
const router = useRouter()
const useGMapManageHook = useGMapManage
const logo = sessionStorage.get('logo')
const title = ref('')
const Icon = (props: { icon: string }) => {
  return createVNode((icons as any)[props.icon])
}

const isMounted = ref(false)

onMounted(() => {
  isMounted.value = true
  useGMapManageHook.globalPropertiesConfig()
  title.value = sessionStorage.get('userName') || ''
})
const handleGoTo = () => {
  window.location.href = '/'
  // 判断当前是否就一个模型
  // const modules = sessionStorage.get('modules')
  // if (modules.length === 1) {
  //   const module = modules.find((item) => item.routeurl === '/shipControl')
  //   if (module) {
  //     return
  //   }
  // } else {
  //   app.setNav(false)
  //   router.push('/')
  // }
}

onMounted(() => {
  // useGMapManageHook.globalPropertiesConfig()
})
const root = getRoot()
const store = useMyStore()

const messageHandler = async (payload: any) => {
  if (!payload) {
    return
  }
  // console.log(payload.data, 'payload')
  switch (payload.biz_code) {
    case EBizCode.GatewayOsd: {
      store.commit('SET_GATEWAY_INFO', payload.data)
      break
    }
    case EBizCode.DeviceOsd: {
      store.commit('SET_DEVICE_INFO', payload.data)
      break
    }
    case EBizCode.DockOsd: {
      store.commit('SET_DOCK_INFO', payload.data)
      break
    }
    case EBizCode.MapElementCreate: {
      store.commit('SET_MAP_ELEMENT_CREATE', payload.data)
      break
    }
    case EBizCode.MapElementUpdate: {
      store.commit('SET_MAP_ELEMENT_UPDATE', payload.data)
      break
    }
    case EBizCode.MapElementDelete: {
      store.commit('SET_MAP_ELEMENT_DELETE', payload.data)
      break
    }
    case EBizCode.DeviceOnline: {
      store.commit('SET_DEVICE_ONLINE', payload.data)
      break
    }
    case EBizCode.DeviceOffline: {
      store.commit('SET_DEVICE_OFFLINE', payload.data)
      break
    }
    case EBizCode.FlightTaskProgress:
    case EBizCode.FlightTaskMediaProgress:
    case EBizCode.FlightTaskMediaHighestPriority: {
      EventBus.emit('flightTaskWs', payload)
      break
    }
    case EBizCode.DeviceHms: {
      store.commit('SET_DEVICE_HMS_INFO', payload.data)
      break
    }
    case EBizCode.DeviceReboot:
    case EBizCode.DroneOpen:
    case EBizCode.DroneClose:
    case EBizCode.CoverOpen:
    case EBizCode.CoverClose:
    case EBizCode.PutterOpen:
    case EBizCode.PutterClose:
    case EBizCode.ChargeOpen:
    case EBizCode.ChargeClose:
    case EBizCode.DeviceFormat:
    case EBizCode.DroneFormat: {
      store.commit('SET_DEVICES_CMD_EXECUTE_INFO', {
        biz_code: payload.biz_code,
        timestamp: payload.timestamp,
        ...payload.data
      })
      break
    }
    case EBizCode.ControlSourceChange:
    case EBizCode.FlyToPointProgress:
    case EBizCode.TakeoffToPointProgress:
    case EBizCode.JoystickInvalidNotify:
    case EBizCode.DrcStatusNotify: {
      EventBus.emit('droneControlWs', payload)
      break
    }
    case EBizCode.FlightAreasSyncProgress: {
      EventBus.emit('flightAreasSyncProgressWs', payload.data)
      break
    }
    case EBizCode.FlightAreasDroneLocation: {
      EventBus.emit('flightAreasDroneLocationWs', payload)
      break
    }
    case EBizCode.FlightAreasUpdate: {
      EventBus.emit('flightAreasUpdateWs', payload.data)
      break
    }
    default:
      break
  }
}

// 监听ws 消息
useConnectWebSocket(messageHandler)

// 返回
const goHome = () => {
  window.location.href = '/'
}

document.documentElement.classList.add('dark')
onBeforeUnmount(() => {
  document.documentElement.classList.remove('dark')
})
</script>
<style lang="scss" scoped>
.project-app-wrapper {
  display: flex;
  transition: width 0.2s ease;
  height: 100%;
  width: 100%;
  .header {
    height: vh(90);
    background: #00000089;
    border: 1px solid;
    border-image: linear-gradient(204deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.81) 58%, rgba(255, 255, 255, 0) 99%) 1
      1;
    background-color: black;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    .header-left {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: vh(0) vw(40);
      width: vw(752);
      height: vh(80);
      cursor: pointer;
      background: linear-gradient(
        180deg,
        rgba(53, 53, 53, 0.82) 52%,
        rgba(87, 87, 87, 0.3) 28%,
        rgba(0, 0, 0, 0.93) 32%,
        rgba(52, 94, 177, 0.76)
      );
      border: 1px solid;
      border-image: linear-gradient(
          238deg,
          rgba(255, 255, 255, 0) 20%,
          #ffffff 27%,
          #ffffff 52%,
          rgba(255, 255, 255, 0.05) 99%,
          rgba(255, 255, 255, 0.03) 100%,
          rgba(255, 255, 255, 0) 100%,
          rgba(255, 255, 255, 0.03) 100%
        )
        1 1;
      border-radius: 0px 0px 96px 0px;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 78px), calc(100% - 100px) 100%, 0 100%);
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
      img {
        width: vw(56);
        height: vh(56);
      }
      h2 {
        color: rgba(255, 255, 255);
        font-weight: 900;
        font-size: px2font(38);
        flex: 1;
      }
    }
  }
  .main-content-wrapper {
    height: 100vh - vh(90);
  }
  .left {
    display: flex;
    width: vw(378);
    flex: 0 0 vw(378);
    background-color: rgba(23, 23, 23, 0.95);

    .main-content {
      flex: 1;
      color: $text-white-basic;
    }
  }

  .right {
    flex-grow: 1;
    position: relative;

    .map-wrapper {
      width: 100%;
      height: 100%;
    }

    .media-wrapper,
    .task-wrapper {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: #f6f8fa;
    }
  }
}
.go-home-btn {
  background-image: url('@/assets/icons/retrun.svg');
  background-size: vw(180) vh(50);
  width: vw(180);
  height: vh(50);
  line-height: vh(50);

  span {
    font-size: px2font(16);
    font-weight: 400;
    text-align: left;
  }
}
</style>
